<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../assets/js/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <style>
        *{
            margin:0px;
            padding: 0px;
        }
        body{
            color:white;
        }
        .card-header{
            background-color: #3498db;
        }
        #collapseOne{
            background-color: #333333;
        }
        h2>button{
            color:white !important;
        }
        p{
            padding-left: 15px;
        }
        p:hover{
            background-color: #2d3766;
        }
        h2>button{
            outline: none !important;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container" >
            <div class="row justify-content-md-center" >
                <div class="col-sm-4" >
                    <div class="accordion" id="accordionExample"  >
                        <div class="card" >
                            <div class="card-header" id="headingOne"  @click="chooseItem(1)">
                                <h2 class="mb-0">
                                    <button class="btn  btn-block text-left iconfont icon-account-fill" type="button"
                                        data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
                                        aria-controls="collapseOne" >
                                        我的
                                    </button>
                                </h2>
                            </div>
                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                data-parent="#accordionExample" v-if="flag==1">
                                <div class="card-body">
                                    <p>发布</p>
                                    <p>图片</p>
                                </div>
                            </div>
                        </div>
                        <div class="card" >
                            <div class="card-header" id="headingOne" @click="chooseItem(2)">
                                <h2 class="mb-0">
                                    <button class="btn  btn-block text-left iconfont icon-email-fill" type="button"
                                        data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
                                        aria-controls="collapseOne" >
                                        邮件
                                    </button>
                                </h2>
                            </div>
                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                data-parent="#accordionExample" v-if="flag==2">
                                <div class="card-body">
                                    <p>写邮件</p>
                                    <p>草稿箱</p>
                                    <p>已发送</p>
                                    <p>垃圾箱</p>
                                </div>
                            </div>
                        </div>
                        <div class="card" >
                            <div class="card-header" id="headingOne" @click="chooseItem(3)">
                                <h2 class="mb-0">
                                    <button class="btn  btn-block text-left iconfont icon-set" type="button"
                                        data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
                                        aria-controls="collapseOne" >
                                        设置
                                    </button>
                                </h2>
                            </div>
                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                data-parent="#accordionExample" v-if="flag==3" >
                                <div class="card-body">
                                    <p>密码</p>
                                    <p>语音</p>
                                </div>
                            </div>
                        </div>
                        <div class="card" >
                            <div class="card-header" id="headingOne">
                                <h2 class="mb-0">
                                    <button class="btn btn-block text-left iconfont icon-Rightbutton-fill" type="button"
                                        data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
                                        aria-controls="collapseOne" >
                                        注册
                                    </button>
                                </h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                flag:0
            },
            methods: {
                chooseItem(item){
                    if(this.flag==item){
                        this.flag=0;
                    }else{
                        this.flag=item;
                    }
                }
            },
        })
    </script>
</body>

</html>